<!DOCTYPE html>
<style>
  #slidein {
    width: 200px;
    height: 200px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  #header {
    position: relative;
    height: 50px;
    z-index: 1;
    background-color: green;
  }

  #section {
    position: absolute;
    overflow: hidden;
    top: 0;
    width: 200px;
  }

  #content {
    width: 200px;
    height: 200px;
    will-change: transform;
    background-color: blue;
  }
</style>

<script>
  if (window.testRunner)
      testRunner.waitUntilDone();

  var offset = 0;
  function slideIn() {
    if (offset == 0) {
      offset = 200;
      requestAnimationFrame(slideIn);
    } else if (window.testRunner) {
      document.getElementById("slidein").style.webkitTransform = "translate3d(" + offset + "px, 0, 0)";
      testRunner.notifyDone();
    }
  }
  requestAnimationFrame(slideIn);
</script>

<div id="slidein">
  <div id="header">This div should stay in front.</div>

  <div id="section">
    <div id="content">
      This div should stay behind the header div.
    </div>
  </div>
</div>
